<template>
  <div class="tablebox">
    <!--    {{tablecolumn}}-->
    <slot></slot>
    <el-table
      ref="multipleTable"
      :data="datasxs"
      style="width: 100%; flex: 1"
      v-bind="$attrs"
      @selection-change="handleSelectionChange"
    >
      <slot
        v-for="(item, index) in tablecolumn"
        :key="index"
        :itemdata="item"
        :name="item['value']"
      >
        <el-table-column
          v-if="item.type == 'selection'"
          type="selection"
          width="55"
        />
        <el-table-column
          v-else-if="item.type == 'image'"
          align="center"
          :label="item.label"
          :prop="item.value"
        >
          <template #default="scope">
            <el-image
              fit="scale-down"
              :src="scope.row[item.value]"
              style="width: 100px; height: 100px"
            />
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type == 'select' && seachfalg"
          :formatter="formatter"
          :label="item.label"
          :prop="item.value"
          :sortable="item.sortable"
        >
          <template #header>
            {{ item.label }}
            <el-popover placement="bottom" trigger="click" width="auto">
              <template #reference>
                <i class="iconfont iconxiala1"></i>
              </template>
              <div
                :style="{
                  height: item.option.length >= 5 ? '200px' : 'auto',
                }"
              >
                <el-scrollbar>
                  <el-checkbox-group
                    v-model="searchdatas[item.value]"
                    style="display: flex; flex-direction: column"
                  >
                    <el-checkbox
                      v-for="opitem in item.option"
                      :key="opitem.value"
                      :label="opitem.value"
                    >
                      <span style="color: #333">{{ opitem.label }}</span>
                    </el-checkbox>
                  </el-checkbox-group>
                </el-scrollbar>
              </div>
            </el-popover>
          </template>
          <template #default="scope">{{ scope.row[item.value] }}</template>
        </el-table-column>
        <el-table-column
          v-else
          :formatter="formatter"
          :label="item.label"
          :prop="item.value"
          :sortable="item.sortable"
        >
          <template #default="scope">{{ scope.row[item.value] }}</template>
        </el-table-column>
      </slot>
    </el-table>
    <!--工具条-->
    <el-row>
      <el-col class="toolbar" :span="24">
        <div>
          <el-button
            v-if="selectionfalg"
            :disabled="handleSelects.length == 0"
            size="small"
            type="danger"
            @click="delsfn"
          >
            全部删除
          </el-button>
        </div>

        <el-pagination
          v-if="datas.length > 10"
          :current-page="currentPage"
          layout="slot,sizes, prev, pager, next, jumper, ->, total"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    props: {
      datas: {
        type: Array,
        required: true,
        default: () => [],
      },
      tablecolumn: {
        type: Array,
        relative: true,
        default: () => [],
      },
      delsbtn: {
        type: Boolean,
        default: true,
      },
      seachfalg: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        handleSelects: [],
        csnum: 1,
        symboldata: Symbol.for('data'),
        searchdatas: { pcs: [], ztwx: [], gzdm: [], pdqk: [] },
      }
    },
    computed: {
      selectionfalg() {
        return (
          this.delsbtn &&
          this.tablecolumn.find((e) => {
            return e.type == 'selection'
          })
        )
      },
      total() {
        let r = this.$z.deepClone(this.datas)
        r = r.filter((e) => {
          for (let key in this.searchdatas) {
            if (this.searchdatas[key].length == 0) {
            } else {
              let r = this.searchdatas[key].find(function (f) {
                let earray = e[key].split(',')
                return earray.find(function (fstr) {
                  return fstr == f
                })
              })
              if (!r) {
                return false
              }
            }
          }
          return true
        })
        return r.length
      },
      datasxs() {
        let r = this.$z.deepClone(this.datas),
          slice0 = (this.currentPage - 1) * this.pageSize,
          slice1 = this.currentPage * this.pageSize
        r = r.filter((e) => {
          for (let key in this.searchdatas) {
            if (this.searchdatas[key].length == 0) {
            } else {
              let r = this.searchdatas[key].find(function (f) {
                let earray = e[key].split(',')
                return earray.find(function (fstr) {
                  return fstr == f
                })
              })
              if (!r) {
                return false
              }
            }
          }
          return true
        })
        r = r.slice(slice0, slice1)
        r.forEach((rf) => {
          let zrf = this.$z.deepClone(rf)
          this.tablecolumn.forEach((e) => {
            if (e.fl && rf[e.value]) {
              rf[e.value] = this.$z.math.divide(rf[e.value], e.fl)
            } else if (e.type == 'select') {
              let s = e.option || []

              s = s.find((f) => {
                return f.value == rf[e.value]
              })
              // if (!this.searchdatas[e.value]) {
              //   this.searchdatas[e.value] = []
              // }
              try {
                rf[e.value] = s.label || rf[e.value]
              } catch (err) {
                rf[e.value] = rf[e.value]
              }
            }
          })
          rf[Symbol.for('data')] = this.$z.deepClone(zrf)
        })
        return r
      },
    },

    mounted() {},
    methods: {
      batchRemove() {},
      handleSelectionChange(val) {
        this.handleSelects = val.map(function (e) {
          return { ...e[Symbol.for('data')] }
        })
      },
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
      },
      handleCurrentChange(page) {
        this.currentPage = page
      },
      formatter(row, column) {
        // console.log(row, column, cellvalue, index)

        return row[column.property]
      },
      delsfn() {
        this.$confirm('确认删除选择数据？').then(() => {
          this.$emit('delfn', this.handleSelects)
          this.$refs.multipleTable.clearSelection()
        })
      },
    },
  }
</script>
<style lang="scss">
  @import 'src/styles/index';

  .tablebox {
    display: flex;
    flex-direction: column;
  }

  .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    margin: 10px 0px;
  }
  .el-table__body {
    border-spacing: 0 5px;
  }
  .el-table tr {
    background: rgba(255, 255, 255, 0.1);
  }
</style>
